<script setup lang="ts">
  import { defineProps, ref, watch, reactive } from 'vue';
  import { useBooleanStore } from '@/store';
  import { Notification, TableRowSelection } from '@arco-design/web-vue';
  import {
    clearAoMatchInfoSendData,
    queryAllotment,
    cancelAlloment,
    cancelOut,
  } from '@/api/sorting-matching';

  const props = defineProps<{
    tableData: any;
  }>();
  const columns: any[] = [
    {
      title: '状态',
      dataIndex: 'isDeal',
      width: 120,
    },

    {
      title: 'AO号',
      dataIndex: 'aoCode',
      width: 180,
    },

    {
      title: '图号',
      dataIndex: 'itemCode',
      width: 180,
    },
    {
      title: '型号',
      dataIndex: 'mProductNumber',
      width: 180,
    },
    {
      title: '质量编号',
      dataIndex: 'qualityCode',
      width: 180,
    },
    {
      title: '合格证号',
      dataIndex: 'mesCheckQualiticationId',
      width: 180,
    },
    {
      title: '拆分前合格证号',
      dataIndex: 'beforeSplitHgz',
      width: 180,
    },
    {
      title: '交接单ID',
      dataIndex: 'wmsDeliveryPlanId',
      width: 180,
    },
    {
      title: 'ERP交接单ID',
      dataIndex: 'erpWmsDeliveryPlanId',
      width: 180,
    },
    {
      title: '台账ID',
      dataIndex: 'wmsItemInventoryId',
      width: 180,
    },
    {
      title: '配套表ID(ms_ao_match_info)',
      dataIndex: 'msAoMatchInfoId',
      width: 180,
    },
    {
      title: '物料清单表ID(ms_ao_match_bill)',
      dataIndex: 'msAoMatchBillId',
      width: 180,
    },
    {
      title: '操作',
      dataIndex: 'action',
      slotName: 'action',
      fixed: 'right',
      width: 180,
    },
  ];

  const columns2: any[] = [
    {
      title: '占用状态',
      dataIndex: 'allotmentStatus',

      width: 140,
    },
    {
      title: '出库状态',
      dataIndex: 'invTransactStatus',
      width: 140,
    },
    {
      title: 'AO号',
      dataIndex: 'aoCode',
      width: '140',
    },
    {
      title: '图号',
      dataIndex: 'itemCode',
      width: '180',
    },

    {
      title: '库存数量',
      dataIndex: 'currentOnhandQty',
      width: '120',
    },
    {
      title: '台账占用数量',
      dataIndex: 'engagedQty',
      width: '150',
    },
    {
      title: '占用数量',
      dataIndex: 'allotmentQty',
      width: '120',
    },

    {
      title: '占用ID',
      dataIndex: 'wmsInvOutAllotmentId',
      width: '150',
    },
    {
      title: '台账ID',
      dataIndex: 'wmsItemInventoryId',
      width: '150',
    },
  ];

  const selectedKeys = ref<any>([]);
  const rowSelection: TableRowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  });
  const booleanStore = useBooleanStore();
  const hStyle = ref({
    'background-color': booleanStore.color,
    'border-radius': booleanStore.borderRadius,
  });

  // 创建一个响应式的本地副本
  const localTableData = ref<any[]>([]);
  // 数据库一共有多少条
  const total = ref<number>(0);
  const pageNum = ref<number>(1);
  const pageSize = ref<number>(30);

  const total2 = ref<number>(0);
  const pageNum2 = ref<number>(1);
  const pageSize2 = ref<number>(30);

  // 监听props.tableData的变化，并更新本地副本
  watch(
    () => props.tableData,
    () => {
      localTableData.value = props.tableData?.list || [];
      total.value = props.tableData?.total || 0;
    },
    { immediate: true }
  );
  function change(e: any) {
    pageNum.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }

  function change2(e: any) {
    pageNum2.value = e;
  }
  function changeSize2(e: any) {
    pageSize2.value = e;
  }

  // 撤销入库
  async function clearMathInfo(recode: any) {
    const data = await clearAoMatchInfoSendData(recode);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
      booleanStore.watchUpdate(13);
    } else {
      Notification.error({
        title: '失败',
        content: data.message ? data.message : '请求失败',
        closable: true,
      });
    }
  }

  const visible = ref<boolean>(false);
  const rowInfo = ref<any>();
  const tableData2 = ref<any[]>([]);
  // 获取数据
  async function getTableData() {
    const data = await queryAllotment(rowInfo.value);
    tableData2.value = data.data;
  }
  // 取消占用
  async function showCanelAlloment(recode: any) {
    rowInfo.value = recode;
    getTableData();
    visible.value = true;
  }

  const consoleId = ref<string>('');
  const consoleName = ref<string>('');

  // 点击行
  async function showBottomData(recode: any) {
    consoleId.value = recode?.consoleId;
    consoleName.value = recode.consoleName;
  }

  const selected = tableData2.value.filter((item: any) =>
    selectedKeys.value.some((key: any) => item.wmsInvOutAllotmentId === key)
  );
  // 撤销占用
  async function cancelOccu() {
    if (selected.length !== 1) {
      Notification.error({
        title: '失败',
        content: '请选择一条记录',
        closable: true,
      });
      return;
    }
    const data = await cancelAlloment(selected[0]);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
      booleanStore.watchUpdate(13);
    } else {
      Notification.error({
        title: '失败',
        content: data.message ? data.message : '请求失败',
        closable: true,
      });
    }
    getTableData();
  }
  // 撤销出库
  async function cancelOuts() {
    if (selected.length !== 1) {
      Notification.error({
        title: '失败',
        content: '请选择一条记录',
        closable: true,
      });
      return;
    }
    const data = await cancelOut(selected[0]);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
      booleanStore.watchUpdate(13);
    } else {
      Notification.error({
        title: '失败',
        content: data.message ? data.message : '请求失败',
        closable: true,
      });
    }
    getTableData();
  }

  // 监听页面变化
  watch([pageNum, pageSize], () => {
    booleanStore.setPage(pageNum.value, pageSize.value, 25);
  });
  watch([pageNum2, pageSize2], () => {
    getTableData();
  });
</script>

<template>
  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div class="font">工作包拆包</div>
    </template>

    <a-table
      :stripe="true"
      class="top-table"
      :pagination="false"
      :columns="columns"
      :data="localTableData"
      @row-click="showBottomData"
    >
      <template #action="{ record }">
        <a-button type="text" @click="clearMathInfo(record)">撤销入库</a-button>
        <a-button
          type="text"
          style="margin-left: 15px"
          @click="showCanelAlloment(record)"
          >取消占用</a-button
        >
      </template>
    </a-table>
    <div class="page-position">
      <a-pagination
        :total="total"
        :current="pageNum"
        :page-size="pageSize"
        show-total
        show-jumper
        show-page-size
        :page-size-options="[30, 50, 100, 500]"
        @change="change"
        @update:page-size="changeSize"
      />
    </div>
  </a-card>
  <!-- 取消占用 -->
  <a-drawer
    :width="840"
    :visible="visible"
    :footer="false"
    unmount-on-close
    @cancel="visible = !visible"
  >
    <template #title> 取消占用 </template>
    <div>
      <div style="display: flex; margin-bottom: 10px">
        <a-button type="primary" size="large" @click="cancelOccu"
          >撤销占用</a-button
        >
        <a-button
          type="primary"
          style="margin-left: 15px"
          size="large"
          @click="cancelOuts"
          >撤销出库</a-button
        >
      </div>
      <a-table
        :stripe="true"
        class="top-table"
        :pagination="false"
        v-model:selectedKeys="selectedKeys"
        row-key="wmsInvOutAllotmentId"
        :row-selection="rowSelection"
        :columns="columns2"
        :data="tableData2"
      >
      </a-table>
      <div class="page-position">
        <a-pagination
          :total="total2"
          :current="pageNum2"
          :page-size="pageSize2"
          show-total
          show-jumper
          show-page-size
          :page-size-options="[30, 50, 100, 500]"
          @change="change2"
          @update:page-size="changeSize2"
        />
      </div>
    </div>
  </a-drawer>
</template>

<style scoped>
  .top-table {
    white-space: nowrap;
  }
  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .font {
    font-size: 20px;
    color: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
  .table {
    margin-left: 10px;
    white-space: nowrap;
  }
</style>
